<template>
  <div class="video-container">
    <div :id="playerId" v-if="playType === 0"></div>
    <!-- <el-dialog
      v-else
      :title="title"
      :visible="dialogFlag"
      :modal-append-to-body="true"
      :append-to-body="true"
      @close="close"
      top="100px"
      custom-class="dialog2"
    > -->
    <j-modal
      :title="title"
      :width="1430"
      :height="height"
      :okButtonProps="{ class:{'jee-hidden': true} }"
      :visible="dialogFlag"
      destroyOnClose
      @cancel="close"
      cancelText="关闭"
    >
      <div class="video-box">
        <div :id="playerId" v-if="playType"></div>
      </div>
    </j-modal>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import axios from 'axios'
export default {
  name: 'VideoPlayer',
  props: {
    code: {
      type: String,
      required: false,
      default: ''
    },
    width: {
      type: Number,
      required: false,
      default: 397
    },
    height: {
      type: Number,
      required: false,
      default: 297
    },
    autoPlay: {
      type: Boolean,
      required: false,
      default: true
    },
    // 码流类型
    streamType: {
      type: Number,
      required: false,
      default: 0
    },
    // 播放方式，0为正常播放，1为弹窗播放
    playType: {
      type: Number,
      required: false,
      default: 0
    },
    // 视频标题
    title: {
      type: String,
      required: false,
      default: '视频详情'
    },
    // 取值 0：普通模式，1：高级模式
    mode: {
      type: Number,
      required: false,
      default: 1
    }
  },
  data() {
    return {
      playerId: '',
      player: null,
      url: '',
      dialogFlag: false
    }
  },
  created() {
    this.playerId = this.createUUID(6)
  },
  mounted() {
    if (this.autoPlay) this.play()
  },
  beforeDestroy() {
    this.stop()
  },
  methods: {
    createUUID(len, radix) {
      const chars = '0123456789'.split('')
      const uuid = []
      radix = radix || chars.length
      if (len) {
        for (let i = 0; i < len; i++) {
          uuid[i] = chars[0 | (Math.random() * radix)]
        }
      }
      return 'player-' + uuid.join('')
    },
    initPlayer() {
      this.player = new window.JSPlugin({
        szId: this.playerId,
        szBasePath: '/',
        iWidth: this.width,
        iHeight: this.height
      })

      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: function(iWndIndex) {
          // 插件选中窗口回调
          console.log('windowSelect callback: ', iWndIndex)
        },
        pluginErrorHandler: function(iWndIndex, iErrorCode, oError) {
          // 插件错误回调
          console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
        },
        windowEventOver: function(iWndIndex) {
          // 鼠标移过回调
          // console.log(iWndIndex);
        },
        windowEventOut: function(iWndIndex) {
          // 鼠标移出回调
          // console.log(iWndIndex);
        },
        windowEventUp: function(iWndIndex) {
          // 鼠标mouseup事件回调
          // console.log(iWndIndex);
        },
        windowFullCcreenChange: function(bFull) {
          // 全屏切换回调
          console.log('fullScreen callback: ', bFull)
        },
        firstFrameDisplay: function(iWndIndex, iWidth, iHeight) {
          // 首帧显示回调
          console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
        },
        performanceLack: function() {
          // 性能不足回调
          console.log('performanceLack callback: ')
        }
      })
    },
    async play() {
      if (this.playType === 1) {
        this.dialogFlag = true
      }

      this.$nextTick(async() => {
        if (this.player === null) this.initPlayer()
        await this.stop()

        // 获取播放地址
        const res = await getAction('/capability/getCameraPlayurls', {
          'cameraCode': this.code
        })

        // 测试
        // const res = await axios({
        //   method: 'POST',
        //   url: 'http://117.73.2.104:9966/situation/camera/zzzt/getCameraPreviewURL',
        //   data: {
        //     cameraIndexCode: '35092606001318000157',
        //     protocol: 'ws',
        //     streamType: 0,
        //     transmode: 1
        //   }
        // })
        // if (res.data.success) {
        //   this.url = res.data.result.data.url
        //   console.log('视频地址', this.url)
        //   this.player.JS_Play(this.url, { playURL: this.url, mode: this.mode }, this.player.currentWindowIndex).then(
        //     () => {
        //       console.log(this.code + '  realplay success')
        //     },
        //     (e) => {
        //       console.log('播放错误')
        //       console.error(e)
        //     }
        //   )
        // }

        if (res.success) {
          this.url = res.result.wsUrl
          this.player.JS_Play(this.url, { playURL: this.url, mode: this.mode }, this.player.currentWindowIndex).then(
            () => {
              console.log(this.code + '  realplay success')
            },
            (e) => {
              console.error(e)
            }
          )
        }
      })
    },
    async stop() {
      if (this.player === null) return

      if (this.url !== '') {
        this.url = ''
        await this.player.JS_Stop()
      }
    },
    close() {
      this.stop()
      this.dialogFlag = false
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.video-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.dialog2 {
  height: 500px;
  width: 300px;
  z-index: 999;
}
.video-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>
